<template>
  <van-nav-bar
      :title="currentPath.name"
      left-text="返回"
      left-arrow
      @click-left="getTop"
  />
  <router-view></router-view>
  <van-tabbar v-model="active">
    <van-tabbar-item
        :icon="item.icon"
        v-for="item in tags"
        :key="item.index"
        @click="getPath(item.path, item.label)"
    >{{ item.label }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      currentPath: {
        path: "",
        name: "",
      },
      tags: [
        {
          index: 1,
          label: "主页",
          icon: "home-o",
          path: "index",
        },
        {
          index: 2,
          label: "订单",
          icon: "orders-o",
          path: "order",
        },
        {
          index: 3,
          label: "我的",
          icon: "user-o",
          path: "user",
        },
      ],
    };
  },
  created() {
    this.getPath("index", "主页");
  },
  methods: {
    //界面跳转
    getPath(path, name) {
      this.currentPath = {path: path, name: name};
      this.$router.push({name: path});
    },
    //返回上一级
    getTop() {
      this.$router.back();
      console.log("返回");
    },
  },
  watch: {
    //监听路由
    $route: {
      handler: function (val) {
        console.log(val);
        this.currentPath.name = val.meta.title;
      },
      deep: true,
    },
  },
};
</script>


<style lang="less" scoped>
</style>